<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="../vue.js"></script>
  </head>

  <body>
    <!-- 
      条件渲染 v-show:
        * v-show 也是控制元素的显示和隐藏,接受一个布尔值,判断是显示还是隐藏
        * 不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 的 display属性
        * v-show不能在`<template>`元素上使用


     -->
    <div id="app">
      <button @click="status = 0">登录</button>
      <button @click="status = 1">注册</button>
      <div>
        <div v-show="status===0">
          <h2>登录</h2>
          <p>
            请输入用户名
            <input type="text" />
          </p>
          <p>
            请输入密码
            <input type="text" />
          </p>
          <p>
            请输入验证码
            <input type="text" />
          </p>
        </div>
        <div v-show="status===1">
          <h2>注册</h2>
          <p>
            请输入用户名
            <input type="text" />
          </p>
          <p>
            请输入密码
            <input type="text" />
          </p>
          <p>
            请确认密码
            <input type="text" />
          </p>
        </div>
      </div>
    </div>
    <script>
      Vue.config.productionTip = false;

      const vm = new Vue({
        el: "#app",
        data() {
          return {
            //0代表登录 1代表注册
            status: 0,
          };
        },
      });
    </script>
  </body>
</html>
